<template>
  <a-card
    :bordered="false"
    :bodyStyle="{ padding: '50px' }"
  >
    <detail-list
      title=""
      :col="1"
    >
      <detail-list-item term="用户名">{{ info.username }}</detail-list-item>
      <detail-list-item term="姓名">{{ info.realName }}</detail-list-item>
      <detail-list-item term="手机号">
        {{ info.phone }}
        <a
          style="marginLeft: 20px"
          @click="handleOpenUpdatePhoneModal"
        >修改</a>
      </detail-list-item>
      <detail-list-item term="登录密码">
        ******
        <a
          style="marginLeft: 20px"
          @click="handleOpenUpdatePasswordModal"
        >修改</a>
      </detail-list-item>
    </detail-list>

    <update-phone-modal
      ref="updatePhoneModal"
      :info="info"
    />
    <update-password-modal ref="updatePasswordModal"/>
  </a-card>
</template>

<script>
import { mapGetters } from 'vuex'
import DetailList from '@/components/tools/DetailList'
import UpdatePhoneModal from './components/UpdatePhoneModal'
import UpdatePasswordModal from './components/UpdatePasswordModal'

const DetailListItem = DetailList.Item

export default {
  name: 'AccountInfoPage',
  components: {
    DetailList,
    DetailListItem,
    UpdatePhoneModal,
    UpdatePasswordModal
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    info () {
      if (JSON.stringify(this.userInfo) !== '{}') return this.userInfo
      return {
        phone: '',
        realName: '',
        username: ''
      }
    }
  },
  methods: {
    handleOpenUpdatePhoneModal () {
      this.$refs.updatePhoneModal.show()
    },
    handleOpenUpdatePasswordModal () {
      this.$refs.updatePasswordModal.show()
    }
  }
}
</script>
